import React from 'react';
import { Button, Select, Form, DatePicker, message, Row, Col,Modal,Input } from "antd";
import { WarningOutlined, CheckOutlined } from "@ant-design/icons";
import { connect } from "react-redux";
import * as actions from "../store/action";
import moment from "moment";
import locale from 'antd/lib/date-picker/locale/zh_CN'
import 'moment/locale/zh-cn'
moment.locale('zh-cn')
const { RangePicker } = DatePicker
const { Option } = Select;
class Index extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            pageIndex: 1,
            pageSize: 10,
            delflag: "",
            visible:false,
            oldPassword:'',
            newPassword:'',
            changepassword:''
        }
    }
    onFinish = (value) => {
        let time = {
            startTime:
                value.warningTime == undefined
                    ? ""
                    : new Date(value.warningTime[0]._d).getTime(),
            endTime:
                value.warningTime == undefined
                    ? ""
                    : new Date(value.warningTime[1]._d).getTime(),
        };
        let page = {
            pageSize: this.state.pageSize, //每页显示数
            pageIndex: this.state.pageIndex - 1, //当前页
        }
        let values = {
            ...value,
            ...time,
            ...page
        };
        if (values.warningType === undefined && values.status === undefined && values.warningTime === undefined) {
            message.warning("请输入查询条件！", 3);
            return

        } else if (values.warningType === "" && values.status === "" && values.warningTime === "") {
            message.warning("请输入查询条件！", 3);
            return
        }
        if (values.warningType === "" && values.warningType === "全部类型") {
            values.warningType = undefined
        }
        if (values.status === "" && values.status === "全部状态") {
            values.status = undefined
        }
        if (values.warningTime === "") {
            values.warningTime = undefined
        }
        this.props.handleQueryByAdress(values);
    };
    Pending = () => {
        this.props.handleQueryByStatus({ status: "疑似" })
    };
    Processed = (LinerWarning = []) => {
        this.props.handleQueryByStatus({ status: "" })
    };
    onFinish2=(values)=>{
        let information={
            oldPassword:values.oldPassword,
            newPassword:values.newPassword
        }
        this.setState({
            visible:false
         },()=>{console.log(this.state.visible)})
        this.props.modifyPassword(information); 
    }
    render() {
        const { LinerWarning, untreatedDataSize, treatedDataSize } = this.props
        return (
            <Row>
                <Col style={{ marginBottom: "20px" }} span='24'>
                    <Button
                        icon={<WarningOutlined />}
                        onClick={this.Pending}
                        size="large"
                        style={{
                            backgroundColor: "#f0ad4e",
                            marginRight: "20px",
                            borderColor: "#eea236",
                            color: "#fff",
                        }}
                    >{`有${untreatedDataSize}条告警待处理`}</Button>
                    <Button
                        icon={<CheckOutlined />}
                        onClick={this.Processed}
                        size="large"
                        style={{
                            backgroundColor: "#5cb85c",
                            color: "#fff",
                            borderColor: "#4cae4c",
                        }}
                    >{`有${treatedDataSize}条告警已处理`}</Button>
                </Col>
                <Col span='20'>
                    <Form layout="inline" ref="queryByAdress" onFinish={this.onFinish}>
                        <Form.Item name="warningType">
                            <Select placeholder="类型">
                                <Option value="振动异常">振动异常</Option>
                                <Option value="事件异常">事件异常</Option>
                            </Select>
                        </Form.Item>
                        <Form.Item name="status">
                            <Select placeholder="状态" style={{ width: 120 }}>
                                <Option value="疑似">疑似</Option>
                                <Option value="误报">误报</Option>
                                <Option value="确认">确认</Option>
                            </Select>
                        </Form.Item>
                        <Form.Item name="warningTime">
                            <RangePicker
                                showTime={{ defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')] }}
                                format="YYYY-MM-DD"
                            />
                        </Form.Item>
                        <Form.Item>
                            <Button
                                type="primary"
                                htmlType="submit"
                                style={{ marginRight: "20px" }}
                            >
                                查询
                        </Button>
                            <Button onClick={() => {
                                this.refs.queryByAdress.resetFields();
                                this.props.handleResetQuery();
                            }}>重置</Button>
                        </Form.Item>
                    </Form>
                </Col>
                <Col span='4'><Button style={{ float: 'right' }} onClick={()=>{this.setState({visible:true})}}>修改个人密码</Button></Col>
                <Modal
                    title='修改个人密码'
                    visible={this.state.visible}
                    onOk={() => { this.setState({ visible: false }) }}
                    onCancel={() => { this.setState({ visible: false }) }}
                    destroyOnClose={true}
                    footer={null}
                    getContainer={false}
                >
                    <Form onFinish={this.onFinish2}>
                        <Form.Item label='旧密码' name='oldPassword' rules={[{ required: true, message: '请输入旧密码' }]}>
                            <Input.Password placeholder='请输入旧密码'></Input.Password>
                        </Form.Item>
                        <Form.Item label='新密码'  name='Password' rules={[{ required: true, message: '请输入新密码' }, { pattern: /^([0-9]|[a-z]|[A-Z]){6,10}$/, message: '密码格式错误,6～10位字母/数字或组合' }]}>
                            <Input.Password placeholder='请输入新密码' value={this.state.password} onChange={(e) => { this.setState({ password: e.target.value }) }}></Input.Password>
                        </Form.Item>
                        <Form.Item label='确认密码' name='newPassword' rules={[{ required: true, message: '请再次确认新密码' }, ({ getFieldValue }) => ({
                            validator(rule, value) {
                                if (!value || getFieldValue('Password') === value) {
                                    return Promise.resolve();
                                }
                                return Promise.reject('两次输入的密码不一致！');
                            }
                        })]}>
                            <Input.Password placeholder='请输入新密码'></Input.Password>
                        </Form.Item>
                        <Form.Item>
                            <Button style={{ marginLeft: '45%' }} type='primary' htmlType='submit'>提交</Button>
                        </Form.Item>
                    </Form>
                </Modal>
            </Row>
        )
    }
}
const mapStateToProps = (state) => ({
    //获取巡线工个人告警信息
    LinerWarning: state.getLinerWarning.LinerWarning,
    treatedDataSize: state.getLinerWarning.treatedDataSize,
    untreatedDataSize: state.getLinerWarning.untreatedDataSize,
    totalCount: state.getLinerWarning.totalCount
});

const mapDispatchToProps = (dispatch) => ({
    //获取巡线工个人告警信息
    getWarningBypatroller(page) {
        dispatch(actions.getWarningBypatroller(page));
    },
    //根据状态类型时间获取告警信息
    getWarningByTypeStatusTime(information) {
        dispatch(actions.getWarningByASTTMD(information));
    },
    //反馈
    feedBack(details, pageIndex) {
        dispatch(actions.feedBack(details, pageIndex));
    },
    getSuspectedStatus(page) {
        dispatch(actions.getSuspectedStatus(page))
    },
    modifyPassword(information) {
        dispatch(actions.modifyPassword(information))
    }
});

export default connect(mapStateToProps, mapDispatchToProps)(Index);
